<template>
	<!-- 合同管理 -->
	<div class="ledgerView">
		<!-- 表单 -->
		<div class="formBox">
			<el-form :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="搜索">
					<el-input
						v-model="form.keywords"
						placeholder="根据项目或合同名称和编号搜索"
						maxlength="32"
					/>
				</el-form-item>
				<el-form-item label="合同状态">
					<el-select v-model="form.status" placeholder="">
						<el-option label="全部" value="" />
						<el-option
							v-for="v in state.statusOptions"
							:key="v.value"
							:label="v.label"
							:value="v.value"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="时间范围">
					<el-date-picker
						v-model="form.time"
						type="daterange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						size="default"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>

				<el-button
					class="el_classbtn m-r10"
					color="#FF7B50"
					style="color: #fff"
					type="primary"
					@click="onQuery"
					>搜索</el-button
				>
				<el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset"
					>重置</el-button
				>

				<!-- <el-divider direction="vertical" /> -->
			</el-form>
		</div>

		<!-- 表格 -->
		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="state.tableData"
			:tableOption.sync="state.tableOption"
			@page-change="onPageChange"
		>
			<template #operation="scope">
				<el-button
					class="button_cancel"
					@click="handleBtnClick(scope.row, '查看合同会审单')"
					type="primary"
					size="small"
					>查看合同会审单</el-button
				>
				<el-button
					class="button_view"
					@click="handleBtnClick(scope.row, '查看账单')"
					type="primary"
					size="small"
					>查看账单</el-button
				>
				<el-button @click="handleBtnClick(scope.row, '下载附件')" size="small" class="button_edit"
					>下载附件</el-button
				>
			</template>
			<template #status="scope">
				<span v-for="v in state.statusOptions" :key="v.value">
					<span v-if="v.value == scope.row.status">{{ v.label }}</span>
				</span>
			</template>
		</public-table>

		<ContractStatement ref="ContractStatementRef"></ContractStatement>

		<DownloadAttachment
			:files="state.files"
			ref="DownloadAttachmentRef"
		></DownloadAttachment>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { ElForm, ElDatePicker, ElDivider } from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import ContractStatement from "./component/ContractStatement.vue";
import DownloadAttachment from "./component/DownloadAttachment.vue";
import { contractApi } from "@/api/biddingProject";
import { useRouter } from "vue-router";

const router = useRouter();

const form = reactive({
	keywords: "",
	status: "",
	startTime: "",
	endTime: "",
	time: "",
});

const state = reactive({
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	files: [],
	tableOption: [
		{ label: "合同状态", prop: "status", slot: true, minWidth: 80 },
		{ label: "合同名称", prop: "contractName", minWidth: 80 },
		{ label: "合同编号", prop: "contractId", minWidth: 80 },
		{ label: "合同创建时间", prop: "createTime", minWidth: 120 },
		{ label: "签约单位/人", prop: "signPartyB", minWidth: 120 },
		{ label: "合同正式签订时间", prop: "signedTime", minWidth: 150 },
		{ label: "关联项目名称", prop: "projectMainName", minWidth: 120 },
		{ label: "关联任务名称", prop: "projectTaskName", minWidth: 120 },
		{
			label: "操作",
			slot: "operation",
			prop: "operation",
			width: 310,
			align: "center",
		},
	],
	tableData: [],
	statusOptions: [
		{
			label: "未签订",
			value: "0",
		},
		{
			label: "已签订",
			value: "1",
		},
	],
});

const onReset = () => {
	for (let key in form) {
		if (typeof form[key] === "string") {
			form[key] = "";
		}
		if (typeof form[key] === "number") {
			form[key] = 0;
		}
	}
	state.page.current = 1;
	state.page.size = 50;
	getPageList();
};

const onQuery = () => {
	getPageList();
};

const onPageChange = (e) => {
	state.page.current = e.page;
	state.page.size = e.limit;
	getPageList();
};

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.tenderType = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.tenderType = store.state.common.tenderType;
	}
};

const ContractStatementRef = ref(null);
const DownloadAttachmentRef = ref(null);

const handleBtnClick = (row, key) => {
	// console.log(row);
	switch (key) {
		case "查看合同会审单":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderContractDetails/tenderTaskId=${
					row.tenderTaskId
				}&pageType=${"view"}&businessId=${row.contractId}`,
			});
			break;
		case "查看账单":
			ContractStatementRef.value.open(row.tenderTaskId);
			break;
		case "下载附件":
			getFiles(row.tenderTaskId);
			DownloadAttachmentRef.value.open(row.tenderTaskId);
			break;

		default:
			break;
	}
};

const getPageList = () => {
	contractApi
		.getPageList({
			pageNum: state.page.current,
			pageSize: state.page.size,
			param: {
				...form,
			},
		})
		.then((res) => {
			if (res.code == 200) {
				state.tableData = res.data.content;
				state.page.total = res.data.totalSize;
			}
		});
};
const getFiles = (id) => {
	contractApi.getFiles(id).then((res) => {
		if (res.code == 200) {
			state.files = res.data;
		}
	});
};

watch(
	() => form.time,
	(value) => {
		console.log(value);
		form.startTime = value[0];
		form.endTime = value[1];
	}
);

onMounted(() => {
	getPageList();
});
</script>

<style lang="scss" scoped>
.el-form-item{
	width: auto !important;
}
.ledgerView {
	.formBox {
		position: relative;
		.el-button {
			margin-top: -15px;
		}
		:deep(.el-input__wrapper) {
			height: 40px !important;
		}
	}

	.el_classderive {
		border: 1px solid #fc7018;
		color: #fc7018;
		background-color: #fff;
	}

	.el-divider {
		vertical-align: sub;
		height: 30px;
		margin: 0 15px;
	}
	.m-t20 {
		.el-button {
			height: 30px;
		}
	}
}
</style>
